<script>
export default {
  name: "ShipmentSteps2",
  props: {
    history: {
      type: Array,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    }
  },
  data(){
    return {
      statusArr: [
        {status: 'wait_receive', title: '待接收', description: '', adminAccount: ''},
        {status: 'wait_sorting', title: '待分拣', description: '', adminAccount: ''},
        {status: 'finished_sorting', title: '已分拣', description: '', adminAccount: ''},
        {status: 'finished_shelves', title: '已上架', description: '', adminAccount: ''},
      ]
    }
  },
  computed: {
    active(){
      let index = 0
      this.statusArr.every((item, index2)=>{
        if(item.status === this.data.status2){
          index = index2 + 1
          return false
        }
        return true
      })
      return index
    },
    showStepList(){
      return this.statusArr.map(item=>{
        const obj = this.history.find(item2=> item2.status === item.status)
        if(obj){
          item.description = obj.statusTime
          // item.adminAccount = obj.adminAccount
        }
        return item
      })
    }
  }
}
</script>

<template>
  <div class="steps">
    <el-steps :active="active" >
      <el-step
        v-for="item in showStepList"
        :key="item.status"
        :title="item.title"
      >
        <template #title>
          <template v-if="item.adminAccount">
            <el-tooltip class="item" effect="dark" :content="item.adminAccount" placement="top-start">
              <div class="font-bold">
                {{item.title}}
              </div>
            </el-tooltip>
          </template>
          <template v-else>
            <div class="font-bold">
              {{item.title}}
            </div>
          </template>
        </template>
        <template #description>
          {{item.description}}
        </template>
      </el-step>

    </el-steps>
  </div>
</template>

<style scoped lang="scss">

</style>
